﻿<phone:PhoneApplicationPage
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
	xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:vm="clr-namespace:FlashlightRecorder.ViewModels"
	xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" xmlns:System="clr-namespace:System;assembly=mscorlib" x:Name="phoneApplicationPage" 
	x:Class="FlashlightRecorder.MainPage"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
	d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
	SupportedOrientations="Portrait"  Orientation="Portrait"
	shell:SystemTray.IsVisible="False">
    <phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="FlashStoryBoard"  RepeatBehavior="{Binding PlayerModel.LoopTime}">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LightPanel" >
          
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

    	<DataTemplate x:Key="SavedRecordStyle">
    		<StackPanel Width="345" Margin="3" Orientation="Horizontal" >
    			<StackPanel Background="{StaticResource PhoneAccentBrush}" Width="64" Height="64">
    				<i:Interaction.Triggers>
    					<i:EventTrigger EventName="ManipulationCompleted">
    						<i:InvokeCommandAction CommandParameter="{Binding Mode=OneWay}" Command="{Binding Root.PlayClipCommand}"/>
    					</i:EventTrigger>
    				</i:Interaction.Triggers>
    				<Image Width="64" Height="64" Source="Images/clip.png"/>
    			</StackPanel>
    			<StackPanel Margin="4">
    				<TextBlock Text="{Binding Name}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeMedium}"/>
    				<StackPanel  Orientation="Horizontal" HorizontalAlignment="Center">
    					<TextBlock FontSize="{StaticResource PhoneFontSizeSmall}" FontFamily="{StaticResource PhoneFontFamilySemiLight}"><Run Text="Notes:"/></TextBlock>
    					<TextBlock Text="{Binding Items.Count}" FontSize="{StaticResource PhoneFontSizeSmall}" FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
    					<TextBlock FontSize="{StaticResource PhoneFontSizeSmall}" FontFamily="{StaticResource PhoneFontFamilySemiLight}"><Run Text="  "/><Run Text="Lasts:"/></TextBlock>
    					<TextBlock Text="{Binding Duration}" HorizontalAlignment="Right" FontSize="{StaticResource PhoneFontSizeSmall}" FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
    				</StackPanel>
    			</StackPanel>
    		</StackPanel>
    	</DataTemplate>
    	<Style x:Key="ButtonStyle1" TargetType="Button">
    		<Setter Property="Background" Value="Transparent"/>
    		<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    		<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
    		<Setter Property="Padding" Value="10,3,10,5"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="Button">
    					<Grid Background="Transparent" Width="64" Height="64">
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="CommonStates">
    								<VisualState x:Name="Normal"/>
    								<VisualState x:Name="MouseOver"/>
    								<VisualState x:Name="Pressed">
    									<Storyboard>
    							
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Disabled">
    									<Storyboard>
    										
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="FocusStates"/>
    						</VisualStateManager.VisualStateGroups>
    						<VisualStateManager.CustomVisualStateManager>
    							<ec:ExtendedVisualStateManager/>
    						</VisualStateManager.CustomVisualStateManager>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    	<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
    		<Setter Property="Background" Value="Transparent"/>
    		<Setter Property="BorderThickness" Value="0"/>
    		<Setter Property="BorderBrush" Value="Transparent"/>
    		<Setter Property="Padding" Value="0"/>
    		<Setter Property="HorizontalContentAlignment" Value="Left"/>
    		<Setter Property="VerticalContentAlignment" Value="Top"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="ListBoxItem">
    					<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="CommonStates">
    								<VisualState x:Name="Normal"/>
    								<VisualState x:Name="MouseOver"/>
    								<VisualState x:Name="Disabled">
    									<Storyboard>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
    										</ObjectAnimationUsingKeyFrames>
    										<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="SelectionStates">
    								<VisualStateGroup.Transitions>
    									<VisualTransition GeneratedDuration="0:0:0.2" To="Selected"/>
    									<VisualTransition From="Selected" GeneratedDuration="0:0:0.5"/>
    								</VisualStateGroup.Transitions>
    								<VisualState x:Name="Unselected"/>
    								<VisualState x:Name="Selected">
    									<Storyboard>

    										
									
    										
    										<ColorAnimation Duration="0" To="{StaticResource PhoneAccentColor}" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
    										<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image" d:IsOptimized="True"/>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="button">
    											<DiscreteObjectKeyFrame KeyTime="0">
    												<DiscreteObjectKeyFrame.Value>
    													<System:Boolean>True</System:Boolean>
    												</DiscreteObjectKeyFrame.Value>
    											</DiscreteObjectKeyFrame>
    										</ObjectAnimationUsingKeyFrames>
    										<DoubleAnimation Duration="0" To="0.995" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="button" d:IsOptimized="True"/>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="SelectedUnfocused"/>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="FocusStates">
    								<VisualState x:Name="Unfocused"/>
    								<VisualState x:Name="Focused"/>
    							</VisualStateGroup>
    						</VisualStateManager.VisualStateGroups>
    						<VisualStateManager.CustomVisualStateManager>
    							<ec:ExtendedVisualStateManager/>
    						</VisualStateManager.CustomVisualStateManager>
    						<Grid>
    							<Grid.ColumnDefinitions>
    								<ColumnDefinition Width="0.797*"/>
    								<ColumnDefinition Width="0.203*"/>
    							</Grid.ColumnDefinitions>
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Grid.ColumnSpan="2"/>
    							<Button x:Name="button" Grid.Column="1" BorderThickness="3" Margin="0" Padding="0" Command="{Binding Root.DeleteClipCommand}" CommandParameter="{Binding Mode=OneWay}" Style="{StaticResource ButtonStyle1}" IsEnabled="False" Opacity="0" >
    								<Image x:Name="image" Source="Images/deleteclip.png" Width="64" Height="64"/>		
        								
								</Button>
								</Grid>
    					</Border>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    	<ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton">
    		<Rectangle Fill="Transparent"/>
    	</ControlTemplate>
    	<Style x:Key="SliderStyle1" TargetType="Slider">
    		<Setter Property="BorderThickness" Value="0"/>
    		<Setter Property="BorderBrush" Value="Transparent"/>
    		<Setter Property="Maximum" Value="10"/>
    		<Setter Property="Minimum" Value="0"/>
    		<Setter Property="Value" Value="0"/>
    		<Setter Property="Background" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="Slider">
    					<Grid Background="Transparent">
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="CommonStates">
    								<VisualState x:Name="Normal"/>
    								<VisualState x:Name="MouseOver"/>
    								<VisualState x:Name="Disabled">
    									<Storyboard>
    										<DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalTrack"/>
    										<DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalTrack"/>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalFill">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalFill">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
    										</ObjectAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    						</VisualStateManager.VisualStateGroups>
    						<Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
    							<Grid.ColumnDefinitions>
    								<ColumnDefinition Width="Auto"/>
    								<ColumnDefinition Width="12"/>
    								<ColumnDefinition Width="*"/>
    							</Grid.ColumnDefinitions>
    							<Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50"/>
    							<Rectangle x:Name="HorizontalTrack" Grid.Column="2" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2"/>
    							<RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
    							<RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
    							<Thumb x:Name="HorizontalThumb" Grid.Column="1" Height="12" Margin="0,22,0,50" Width="12">
    								<Thumb.Template>
    									<ControlTemplate>
    										<Canvas Background="{StaticResource PhoneForegroundBrush}" Height="12" Width="12">
    											<Rectangle Fill="Transparent" Height="84" IsHitTestVisible="True" Canvas.Left="-24" Canvas.Top="-22" Width="60"/>
    										</Canvas>
    									</ControlTemplate>
    								</Thumb.Template>
    							</Thumb>
    						</Grid>
    						<Grid x:Name="VerticalTemplate" Margin="{StaticResource PhoneVerticalMargin}">
    							<Grid.RowDefinitions>
    								<RowDefinition Height="*"/>
    								<RowDefinition Height="12"/>
    								<RowDefinition Height="Auto"/>
    							</Grid.RowDefinitions>
    							<Rectangle x:Name="VerticalFill" Fill="{TemplateBinding Foreground}" IsHitTestVisible="False" Margin="18,0,18,0" Grid.Row="2" Width="12"/>
    							<Rectangle x:Name="VerticalTrack" Fill="{TemplateBinding Background}" IsHitTestVisible="False" Margin="18,0,18,0" Opacity="0.2" Width="12"/>
    							<RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Grid.Row="2" Template="{StaticResource PhoneSimpleRepeatButton}"/>
    							<RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
    							<Thumb x:Name="VerticalThumb" Height="12" Margin="18,0" Grid.Row="1" Width="12" Foreground="White" Background="#BFFFFFFF" BorderBrush="#BFFFFFFF">
    								<Thumb.Template>
    									<ControlTemplate>
    										<Canvas Background="White" Height="12" Width="12">
    											<Rectangle Fill="Transparent" Height="72" IsHitTestVisible="True" Canvas.Left="-18" Canvas.Top="-30" Width="48"/>
    										</Canvas>
    									</ControlTemplate>
    								</Thumb.Template>
    							</Thumb>
    						</Grid>
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    	<Style x:Key="ButtonStyle2" TargetType="Button">
    		<Setter Property="Background" Value="Transparent"/>
    		<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    		<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
    		<Setter Property="Padding" Value="10,3,10,5"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="Button">
    					<Grid Background="Transparent">
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="CommonStates">
    								<VisualState x:Name="Normal"/>
    								<VisualState x:Name="MouseOver">
    									<Storyboard>
    										<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Pressed">
    									<Storyboard>
    										<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Disabled">
    									<Storyboard>
    										<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
    										<ColorAnimation Duration="0" To="#66FFFFFF" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    						</VisualStateManager.VisualStateGroups>
    						<Border x:Name="ButtonBackground" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}" BorderBrush="White" Background="Black">
    							<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" BorderBrush="White" Foreground="White"/>
    						</Border>
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    	<ControlTemplate x:Key="PhoneDisabledTextBoxTemplate" TargetType="TextBox">
    		<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
    	</ControlTemplate>
    	<Style x:Key="TextBoxStyle1" TargetType="TextBox">
    		<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
    		<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
    		<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
    		<Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>
    		<Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>
    		<Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}"/>
    		<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
    		<Setter Property="Padding" Value="2"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="TextBox">
    					<Grid Background="Transparent">
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="CommonStates">
    								<VisualState x:Name="Normal"/>
    								<VisualState x:Name="MouseOver"/>
    								<VisualState x:Name="Disabled">
    									<Storyboard>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">
    											<DiscreteObjectKeyFrame KeyTime="0">
    												<DiscreteObjectKeyFrame.Value>
    													<Visibility>Collapsed</Visibility>
    												</DiscreteObjectKeyFrame.Value>
    											</DiscreteObjectKeyFrame>
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOrReadonlyBorder">
    											<DiscreteObjectKeyFrame KeyTime="0">
    												<DiscreteObjectKeyFrame.Value>
    													<Visibility>Visible</Visibility>
    												</DiscreteObjectKeyFrame.Value>
    											</DiscreteObjectKeyFrame>
    										</ObjectAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="ReadOnly">
    									<Storyboard>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">
    											<DiscreteObjectKeyFrame KeyTime="0">
    												<DiscreteObjectKeyFrame.Value>
    													<Visibility>Collapsed</Visibility>
    												</DiscreteObjectKeyFrame.Value>
    											</DiscreteObjectKeyFrame>
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOrReadonlyBorder">
    											<DiscreteObjectKeyFrame KeyTime="0">
    												<DiscreteObjectKeyFrame.Value>
    													<Visibility>Visible</Visibility>
    												</DiscreteObjectKeyFrame.Value>
    											</DiscreteObjectKeyFrame>
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DisabledOrReadonlyBorder">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DisabledOrReadonlyContent">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}"/>
    										</ObjectAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="FocusStates">
    								<VisualState x:Name="Focused">
    									<Storyboard>
    										<ColorAnimation Duration="0" To="#FF7E7E7E" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="EnabledBorder" d:IsOptimized="True"/>
    										<ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentElement" d:IsOptimized="True"/>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Unfocused"/>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="ValidationStates">
    								<VisualState x:Name="InvalidFocused">
    									<Storyboard>
    										<ColorAnimation Duration="0" To="#FFA7A7A7" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="EnabledBorder" d:IsOptimized="True"/>
    										<ColorAnimation Duration="0" To="#BF979797" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="EnabledBorder" d:IsOptimized="True"/>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Valid"/>
    								<VisualState x:Name="InvalidUnfocused"/>
    							</VisualStateGroup>
    						</VisualStateManager.VisualStateGroups>
    						<Border x:Name="EnabledBorder" BorderThickness="{TemplateBinding BorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}" Background="#FFB8B8B8" BorderBrush="#BFFFFFFF">
    							<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
    						</Border>
    						<Border x:Name="DisabledOrReadonlyBorder" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed" BorderBrush="#66FFFFFF">
    							<TextBox x:Name="DisabledOrReadonlyContent" Background="Transparent" Foreground="{StaticResource PhoneDisabledBrush}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" IsReadOnly="True" SelectionForeground="{TemplateBinding SelectionForeground}" SelectionBackground="{TemplateBinding SelectionBackground}" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" Text="{TemplateBinding Text}" Template="{StaticResource PhoneDisabledTextBoxTemplate}"/>
    						</Border>
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>

    </phone:PhoneApplicationPage.Resources>

	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Black">

        <!--Pivot control-->
        <StackPanel x:Name="LightPanel" Width="480" Height="800" Opacity="0" >
            <StackPanel.Background>
                <SolidColorBrush Color="{Binding ColorModel.Color}"/>
            </StackPanel.Background>
        </StackPanel>
        <controls:Pivot x:Name="Pages" Title="Flashlight Recorder" Foreground="White" TabNavigation="Cycle" SelectedIndex="{Binding PageIndex, Mode=TwoWay}">


            <!--Pivot item one--><!--Pivot item two--><!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
            <controls:PivotItem Header="Home">
                <!--Double line list with image placeholder and text wrapping-->
                <StackPanel>

                    <StackPanel Orientation="Horizontal" Margin="0,0,0,15" HorizontalAlignment="Left">
                        <StackPanel x:Name="NavRecord" Width="100" Height="100" Background="{StaticResource PhoneAccentBrush}" Margin="{StaticResource PhoneTextBoxInnerMargin}" ManipulationCompleted="NavRecord_ManipulationCompleted">
                            <Image Source="/FlashlightRecorder;component/Images/record.png"></Image>
                        </StackPanel>
                        <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="{StaticResource PhoneTextBoxInnerMargin}"><Run Text="Record"/></TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="{StaticResource PhoneTextBoxInnerMargin}" HorizontalAlignment="Left">
                        <StackPanel x:Name="NavPlay" Width="100" Height="100" Background="{StaticResource PhoneAccentBrush}" Margin="{StaticResource PhoneTextBoxInnerMargin}" ManipulationCompleted="NavPlay_ManipulationCompleted">
                            <Image Source="/FlashlightRecorder;component/Images/play.png"></Image>
                        </StackPanel>
                        
                        <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="{StaticResource PhoneTextBoxInnerMargin}"><Run Text="Play"/></TextBlock>
                    </StackPanel>
                    <ListBox x:Name="listBox" Height="400" Margin="0" ItemsSource="{Binding Records}" ItemTemplate="{StaticResource SavedRecordStyle}" Width="429" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" Foreground="White">
                        <!--<i:Interaction.Triggers>
                    		<i:EventTrigger EventName="SelectionChanged">
                    			<i:InvokeCommandAction Command="{Binding PlayClipCommand}" CommandParameter="{Binding SelectedItem, ElementName=listBox}"/>
                    		</i:EventTrigger>
                    	</i:Interaction.Triggers>-->
                    </ListBox>
                </StackPanel>
            </controls:PivotItem>
            <controls:PivotItem Header="Recorder" Foreground="White" >
                <!--Double line list with text wrapping-->
                <Grid >
                    <Grid.RowDefinitions>
                    	<RowDefinition Height="71" />
                    	<RowDefinition Height="364" />
                    	<RowDefinition Height="63" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                    	<ColumnDefinition Width="1*" />
                    	<ColumnDefinition Width="1*" />
                    	<ColumnDefinition Width="1*" />
                    	<ColumnDefinition Width="1*" />
                    </Grid.ColumnDefinitions>
                    <Button Grid.ColumnSpan="1" Margin="0,0,0,0" BorderThickness="1" Command="{Binding RecorderModel.StartRecordCommand}" Content="Start" Foreground="White" BorderBrush="White" Background="Transparent" Style="{StaticResource ButtonStyle2}" />
                    <Button Grid.Column="1" Grid.ColumnSpan="1" Margin="0,0,0,0" BorderThickness="1" Command="{Binding RecorderModel.StopRecordCommand}" Content="Stop" Foreground="White" BorderBrush="White" Background="Transparent" Style="{StaticResource ButtonStyle2}"/>
                    <Button Grid.Column="2" Grid.ColumnSpan="1" Margin="0,0,0,0" BorderThickness="1" Command="{Binding RecorderModel.SaveRecordCommand}" Content="Save" Foreground="White" BorderBrush="White" Background="Transparent" Style="{StaticResource ButtonStyle2}"/>
                    <Button Grid.Column="3" Grid.ColumnSpan="1" Margin="0,0,0,0" BorderThickness="1" Command="{Binding RecorderModel.ClearRecordCommand}" Content="Clear" Foreground="White" BorderBrush="White" Background="Transparent" Style="{StaticResource ButtonStyle2}"/>
                    <Grid Grid.ColumnSpan="4" Grid.Row="1" Height="524" Margin="0,0,0,-97" Grid.RowSpan="2" Width="456">
                        <Grid.RowDefinitions>
                        	<RowDefinition Height="74*" />
                        	<RowDefinition Height="290*" />
                        </Grid.RowDefinitions>
                        <Button x:Name="button" Margin="0" Grid.RowSpan="1" Grid.Row="2" Content="Tap it to FLASH！" Foreground="White" BorderBrush="White" Style="{StaticResource ButtonStyle2}">
                            <i:Interaction.Triggers>
                            	<i:EventTrigger EventName="ManipulationCompleted" SourceObject="{Binding ElementName=button}">
                            		<i:InvokeCommandAction CommandParameter="False" Command="{Binding RecorderModel.RecordSingnalCommand}"/>
                            	</i:EventTrigger>
                            	<i:EventTrigger EventName="ManipulationStarted" SourceObject="{Binding ElementName=button}">
                            		<i:InvokeCommandAction Command="{Binding RecorderModel.RecordSingnalCommand}" CommandParameter="True"/>
                            	</i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Button>
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
                            <TextBlock VerticalAlignment="Center" Foreground="White"><Run Text="Name:"/></TextBlock>
                            <TextBox  HorizontalAlignment="Stretch" Text="{Binding RecorderModel.RecordingTarget.Name, FallbackValue=New Clip, Mode=TwoWay}" FontSize="{StaticResource PhoneFontSizeMedium}" VerticalContentAlignment="Stretch" Width="306" Foreground="Black" SelectionForeground="White" Background="#BFFFFFFF" BorderBrush="#BFFFFFFF" Style="{StaticResource TextBoxStyle1}" />
                        </StackPanel>
                    </Grid>
                </Grid>
            </controls:PivotItem>

            <controls:PivotItem Header="Player">
                <!--Double line list with text wrapping-->
                <Grid>
                    <StackPanel>
                    	<StackPanel Orientation="Horizontal"> <TextBlock Foreground="White"><Run Text="Name:"/></TextBlock><TextBlock Text="{Binding PlayerModel.CurrentRecord.Name}" Foreground="White"></TextBlock></StackPanel>
                    <Grid Height="410">
                    	<Grid.RowDefinitions>
                    		<RowDefinition Height="0.1*"/>
                    		<RowDefinition Height="0.9*"/>
                    	</Grid.RowDefinitions>
                    	<Grid.ColumnDefinitions>
                    		<ColumnDefinition Width="0.1*"/>
                    		<ColumnDefinition Width="0.1*"/>
                    		<ColumnDefinition Width="0.1*"/>
                    	</Grid.ColumnDefinitions>
                    		   <StackPanel Grid.ColumnSpan="1" Grid.RowSpan="2" >
                        <TextBlock Foreground="White"><Run Text="Red:"/></TextBlock>
                      
						</StackPanel>     
						  <Slider Grid.Column="0" Grid.Row="1" Orientation="Vertical" Minimum="0" Maximum="255" Value="{Binding ColorModel.Red, FallbackValue=255, Mode=TwoWay}" SmallChange="1" Background="White" Opacity="0.54" BorderBrush="Transparent" Foreground="White" Style="{StaticResource SliderStyle1}"/>
						
										<StackPanel Grid.Column="1" Grid.RowSpan="2">
                        <TextBlock Foreground="White"><Run Text="Green:"/></TextBlock>
                       
						</StackPanel>  
						 <Slider Grid.Column="1" Grid.Row="1" Orientation="Vertical"  Minimum="0" Maximum="255" Value="{Binding ColorModel.Green, Mode=TwoWay}" SmallChange="1" Background="White" Opacity="0.54" BorderBrush="Transparent" Foreground="White" Style="{StaticResource SliderStyle1}">
                        	
                        </Slider>
						<StackPanel Grid.Column="2" Grid.RowSpan="2">
                        <TextBlock Foreground="White"><Run Text="Blue:"/></TextBlock>
                        
						</StackPanel>   
						<Slider Grid.Column="2" Grid.Row="1"  Orientation="Vertical" Minimum="0" Maximum="255" Value="{Binding ColorModel.Blue, Mode=TwoWay}" SmallChange="1" Background="White" Opacity="0.54" BorderBrush="Transparent" Foreground="White" Style="{StaticResource SliderStyle1}">
    
                        </Slider>     
					</Grid>

                        <Button x:Name="button1" Content="Start/Stop" Command="{Binding PlayerModel.StartStopCommand}" CommandParameter="{StaticResource FlashStoryBoard}" Height="118" Foreground="White" BorderBrush="White" />
                    </StackPanel>
                    <Rectangle HorizontalAlignment="Right" Height="71" Margin="0,0,30,8" Stroke="Black" VerticalAlignment="Bottom" Width="111">
                    	<Rectangle.Fill>
                    		<SolidColorBrush Color="{Binding ColorModel.Color}"/>
                    	</Rectangle.Fill>
                    </Rectangle>
                    <CheckBox Content="Loop" Height="71" Margin="35,0,0,8" VerticalAlignment="Bottom" Background="#BFFFFFFF" BorderBrush="#BFFFFFFF" Foreground="White" HorizontalAlignment="Left" Width="140" IsChecked="{Binding PlayerModel.Loop, Mode=TwoWay}"/>
                </Grid>
            </controls:PivotItem>
			   <controls:PivotItem Header="Empty Screen"></controls:PivotItem>
        </controls:Pivot>
    </Grid>
</phone:PhoneApplicationPage>